<template>
  <el-dialog :title="title" :visible.sync="showDialog" width="500px" @close="cancelSubmit" class="dialogEditTask">
    <el-form :model="formData" ref="formData" label-width="130px" style="padding-left:20px;" size="small">
      <el-form-item prop="companyCode" label="单位名称" :rules="{ required: true, message: '请选择单位名称', trigger: 'blur'}">
        <el-select v-model="formData.companyCode" placeholder="请选择单位" @change="companyChange" clearable style="width:250px;">
          <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="stationCode" label="场站名称：" :rules="{ required: true, message: '请选择场站名称', trigger: 'blur'}">
        <el-select style="width:250px;"  v-model="formData.stationCode" placeholder="请选择场站" clearable>
          <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="inspectTaskCode" label="任务编号：" :rules="{ required: true, message: '请输入任务编号', trigger: 'change'}">
        <el-input style="width:250px;" v-model="formData.inspectTaskCode"></el-input>
      </el-form-item>
<!--      <el-form-item prop="inspectRouteCode" label="航线编码：" :rules="{ required: true, message: '请输入航线编码', trigger: 'change'}">-->
<!--        <el-input style="width:250px;" v-model="formData.inspectRouteCode"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item prop="stationCode" label="日期：" :rules="{ required: true, message: '请选择日期', trigger: 'change'}">
        <el-date-picker
          v-model="formData.inspectDay"
          type="datetime"
          placeholder="选择日期" style="width:250px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="taskDescription" label="任务描述：">
        <el-input type="textarea" style="width:250px;" v-model="formData.taskDescription"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer text-center">
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
      <el-button @click="cancelSubmit" size="small">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import stationApi from "../../../api/stations";
  import manual from "../../../api/manual";
  import taskApi from "../../../api/taskList";
  import utils from "../../../utils"

  export default {
    name: "dialogAddTask",
    data() {
      return {
        showDialog: false,
        formData: {
          companyCode: "",
          stationCode: "",
          inspectTaskCode: '',
          inspectRouteCode: '',
          inspectDay: '',
          taskDescription: ''
        },
        tree: [],
        stationList: []
      }
    },
    props: {
      title: {type: String, default: () => {}},
      taskInfo: {type: Object, default: () => {}}
    },
    methods: {
      show() {
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs.formData.clearValidate()
          this.getCompanyList()
        })
      },
      setInit() {
        this.formData = this.taskInfo
      },
      companyChange() {
        this.formData.stationCode = ""
        this.getStationByCompany()
      },
      getStationByCompany() {
        manual.getStationByCompany({
          companyCode: this.formData.companyCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      getCompanyList() {
        stationApi.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
            if (this.taskInfo.companyCode) {
              this.setInit()
            }
          }
        }).catch(e => {
          this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      cancelSubmit() {
        this.showDialog = false
        this.formData = {
          companyCode: null,
          stationName: '',
          stationAddress: '',
          stationAdminName: '',
          stationAdminPhone: '',
          stationCode: ''
        }
      },
      submit() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            if (this.title === '新增任务') {
              this.formData.inspectDay = utils.parseTime(this.formData.inspectDay, "{y}-{m}-{d} {h}:{i}:{s}")
              taskApi.insertInspectTaskInfo(this.formData).then(res => {
                if (res && res.data.code === 200) {
                  this.$message.success('新增场站成功')
                  this.$emit("sendDialogEditTask")
                  this.showDialog = false
                  this.getList()
                } else {
                  this.$message.error(res.data.message)
                }
              })
            } else {
              this.formData.inspectDay = utils.parseTime(this.formData.inspectDay, "{y}-{m}-{d} {h}:{i}:{s}")
              taskApi.updateInspectTaskInfo(this.formData).then(res => {
                if (res && res.data.code === 200) {
                  this.$message.success('修改场任务成功')
                  this.$emit("sendDialogEditTask")
                  this.showDialog = false
                } else {
                  this.$message.error(res.data.message)
                }
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .dialogEditTask{
  }
</style>
